{% extends "base.html" %}
{% load upload_tags %}

{% block breadcrumb %}
    {{ block.super }}
    {% load breadcrumb_tags %}
    {% add_crumb 'Phân phối chương trình' %}

{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(document).ready(function () {
            $('#fileupload').fileupload({
                url:'/school/import/schoolAgenda/' + {{ id }} +'/' + {{ grade }} +'/' + {{ term }},
                dataType:'json',
                acceptFileTypes:/(\.|\/)(xls)$/i,
                maxNumberOfFiles:5
            });

            $("#submit_button").click(function () {
                var sub = $("select[name=subject]").val();
                var grade = $("select[name=grade]").val();
                var term = $("select[name=term]").val();
                $("#selectform").attr("action", "/school/manage_school_agenda/" + sub + "/" + grade + "/" + term);
                $("#selectform").submit();
            });

            $("#notify").ajaxSuccess(function (event, request, settings, json) {
                if (json.message != null) {
                    $(this).html("<ul>" + json.message + "</ul>");
                    $(this).delay(1000).fadeOut(10000);
                    if (json.message == 'Đã lưu. Vui lòng cập nhật các tiết học mới') window.location.reload(true);
                }
                else {
                    $(this).text("Lưu");
                    $(this).delay(1000).fadeOut('fast');
                }
            });

            $("#upload_modal").on('hidden', function () {
                location.reload('true');
            });
            $("#upload-modal-exit").click(function () {
                $("#upload_modal").modal('hide');
                return false;
            });
        });
    </script>
{% endblock %}

{% block content %}
    <div class="row-fluid pagination-centered">
    <p>Phân phối chương trình chung cho từng môn học trong toàn trường. Giáo viên có thể thiết lập phân phối chương trình riêng cho lớp mình dạy hoặc sử dụng phân phối chương trình chung của toàn trường này.</p>
        <form class="form-inline" id="selectform" action="" name="info" method="post">{% csrf_token %}
            {{ form }}
            <button class="btn btn-success" id="submit_button"> Xem</button>
        </form>
        <a class="btn"
           title="Nhập chương trình học từ file Excel"
           href="#upload_modal"
           data-toggle="modal"
           id="import">
            <i class="icon-upload-alt"></i>
            Nhập từ Excel </a>
        <a class="btn" title="Xuất chương trình học ra file Excel."
           href="{% url export_school_agenda id grade term%}" id="export">
            <i class="icon-download-alt"></i>
            Xuất ra Excel </a>
    </div>

    {% if list %}
        <h2>Môn {{ subject }} lớp {{ grade }} kì {{ term }}</h2>
        <table class="table table-striped table-bordered">
            <tr>
                <th>Tiết</th>
                <th>Tiêu đề</th>
                <th>Ghi chú</th>

            </tr>
            {% for u in list %}
                <tr>
                    <td>{{ u.index }}</td>
                    <td>{{ u.title }}</td>
                    <td>{{ u.note }}</td>

                </tr>
            {% endfor %}
        </table>
    {% else %}
        <div align="center">Chưa có phân phối chương trình môn {{ subject }} {{ school }} lớp {{ grade }} kì {{ term }},
            vui lòng
            nhập bằng file Excel.
        </div>
    {% endif %}

    {#    <div style="display: none;">#}
    {#        <div id="fileupload">#}
    {#            <form method="post" action="" enctype="multipart/form-data">#}
    {#                <div class="fileupload-buttonbar">#}
    {#                    {% csrf_token %}#}
    {#                    <label class="fileinput-button">#}
    {#                        <span>Chọn file...</span>#}
    {#                        <input type="file" name="file" multiple>#}
    {#                    </label>#}
    {#                </div>#}
    {#            </form>#}
    {#            <div class="fileupload-content">#}
    {#                <table class="files"></table>#}
    {#                <div class="fileupload-progressbar"></div>#}
    {#            </div>#}
    {#            <div id="errorDetail" class="errorlist errorDiv" style="display: none;">#}
    {#            </div>#}
    {#            <p>#}
    {#                Chú ý: Phải dùng file Excel theo <a href="{%url export_system_agenda id grade term %}">mẫu#}
    {#                này</a>.#}
    {#            </p>#}
    {#        </div>#}
    {#    </div>#}
    <div class="modal fade" id="upload_modal" style="display: none;">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>

            <h3>Nhập phân phối chương trình từ file Excel</h3>
        </div>
        <div class="modal-body">
            <!-- The file upload form used as target for the file upload widget -->
            <form id="fileupload" action="" method="POST" enctype="multipart/form-data">
                <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                <div class="row fileupload-buttonbar">
                    <div class="span5">
                        <!-- The fileinput-button span is used to style the file input field as button -->
                            <span class="btn btn-success fileinput-button">
                                <i class="icon-plus icon-white"></i>
                                <span>Chọn file...</span>
                                <input type="file" name="files[]" multiple>
                            </span>
                        <button type="submit" class="btn btn-primary start">
                            <i class="icon-upload icon-white"></i>
                            <span>Tải tất cả</span>
                        </button>
                        <button type="reset" class="btn btn-warning cancel">
                            <i class="icon-ban-circle icon-white"></i>
                            <span>Dừng lại</span>
                        </button>
                        <button type="button" class="btn btn-danger delete">
                            <i class="icon-trash icon-white"></i>
                            <span>Xóa</span>
                        </button>
                        <input type="checkbox" class="toggle">
                    </div>
                    <div class="span3">
                        <!-- The global progress bar -->
                        <div class="progress progress-success progress-striped active fade">
                            <div class="bar" style="width:0;"></div>
                        </div>
                    </div>
                </div>
                <!-- The loading indicator is shown during image processing -->
                <div class="fileupload-loading"></div>
                <br>
                <!-- The table listing the files available for upload/download -->
                <table class="table table-striped">
                    <tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery">

                    </tbody>
                </table>
            </form>
            <div id="errorDetail">

            </div>
            <div class="hint">
                <p>
                    Chú ý: Phải dùng file Excel theo <a href="{%url export_system_agenda id grade term %}">mẫu
                    này</a>.
                </p>
            </div>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" id="upload-modal-exit">Thôi</a>
        </div>
    </div>
    {% upload_js %}
    <script type="text/javascript"
            src="/static/js/jquery_file_upload/jquery_upload_for_system_agenda.js?{{ VERSION }}"></script>
    <script type="text/javascript" src="/static/js/jquery_file_upload/locale.js"></script>
{% endblock %}